vue指令篇（v

v-if=""，绑定data里的属性对象名或者表达式，值为布尔值

例子：v-if=“a”  ，data里定义 a ：true  或者  v-if=“a > 3”  定义 a  ：4  或者v-if="loginType === 'username'" 为真时显示该项

实战经验：一般通过点击方法修改该值的真假，达到v-if展示隐藏的功能

循环数组：

{{item}} -- {{index}}

循环对象：

{{value}} -- {{key}}

实战经验：一般用来循环某个子项或者某个组件

：title=“msg”， ：src=“url”， ：class=“三元表达式” 

实战经验：将属性绑定数据里的一个值，当值改变，则该属性响应式变化，或者绑定class使用三元表达式动态的改变类样式，或者绑定style 将后端返回的样式进行绑定

是表单元素双向绑定指令，v-model="loginform.username"

v-model修饰符:

1. lazy

输入框失去焦点或者按下回车时，v-model绑定的值才会发生变化，即在“change”时而非“input”时更新

2. number

自动将用户的输入值转为数值类型。

3. trim

自动过滤用户输入的首尾空白字符。

实战经验：通常将表单输入的值绑定data里的值，将该值作为params参数传给后端，有时候需要定义一个对象=qs{

定义的名：v-model绑定的值

}，再把这个对象传给后端。qs只是一个格式转换的工具类函数

事件指令，v-on:后面的值是一个方法，可以写成myclick()，没有参数可以写成myclick

事件修饰符 ：

 实战经验：绑定事件上的event对象即  @click="submit( $event)"，将$event作为参数传入，可以在方法内拿到event上的原型对象，不传入参数时，默认方法内获得的第一个参数为event对象

submit(e) {

      console.log(e);

    },

这个e就是$event参数，e.target.value可以拿到输入框的值

计算属性一般是一个函数 return this数据里的计算，然后可以直接{{}}显示该函数，或者可以直接使用，例如v-for这个计算出来的数组

实战经验：一般用来计算费用的总价，结合数组操作reduce，或者配合vuex计算出里面的state值。计算属性一般会随着数据的改变而重新计算，如果数据未改变，则缓存下来。

需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。实战中当input输入框值发生变化时在监听函数内重新发送请求。

1.场景:表格初始进来需要调查询接口 getList(),然后input 改变会重新查询

vue watch监听的实战用法_黑星-CSDN博客

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

在所有的过滤器中是没有this引用的，过滤器内的this是一个undefined的值，所以不要在过滤器内尝试引用组件实例内的变量或方法，否则会引发空值引用的异常。